<template>
    <c-list-template :operation="true" title="金融配置">
        <template slot="search">
            <el-row :gutter="24">

                <el-col :span="5" class="flex-center">
                    <div class="mr-lg">银行名称：</div>
                    <el-input placeholder="请输入银行名称搜索" v-model="querys.bankName" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="4">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
                <el-col :span="2" :push="13">
                    <el-button icon="el-icon-plus" type="primary">新增</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="bankName" label="银行名称" width=""></el-table-column>
                <el-table-column align="center" prop="rate" label="服务费比例（%）" width=""></el-table-column>
                <el-table-column align="center" prop="interval" label="授信利率区间" width=""></el-table-column>
                <el-table-column align="center" prop="account" label="平台账户号" width=""></el-table-column>
                <el-table-column align="center" prop="timeCreate" label="创建时间" width=""></el-table-column>
                <el-table-column align="center" label="操作" width="">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr-lg" @click="handleEdit(scope.row)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>

        <c-dealer-form ref="cDealerForm" />
    </c-list-template>
</template>

<script>
import cDealerForm from "./components/c-finance-form.vue";
export default {
    components: {
        cDealerForm
    },
    data () {
        return {
            querys: {
                phone: "",
                supplierName: "",
                size: 10
            },
            loading: false,
            tableData: [
                { bankName: "xxx", rate: "3%", interval: "5~10%", account: "13820996610", timeCreate: "2021-09-03 12:21:33" },
            ],
            total: 0,
            current: 1
        };
    },
    mounted () {

    },
    methods: {
        handleSelect () { },
        handleReset () { },
        handleSizeChange (val) {
            this.querys.size = val;
            // this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            // this.tableList();
        },
        handleEdit (item) {
            this.$refs.cDealerForm.handleOpen(item);
        },
    }
};
</script>
<style scoped lang="scss">
</style>
